/*
	project: My calculator;
	author: WeiHong Lin;
	id: 15331204;
	time: Wed Oct5 8:31PM;
	Feature: 1.gradual change of background-color;
			 2.protrusion of button togrther with calculator itself;
			 3.different color of button, using opacity;
			 4.using new font-family of displaying, let it be more similar to the real one;
			 5.setting the background with a comfortable image;
			 6.it can test whether Arithmetic Expressions is valid, if not, alert will occur;
			 7.it can deal with the big number using science notation;
			 8.it can use the result of the last calculation and continue the next one;
			 9.when alert occurs, you can continue to change the expression instead of inputing again;
			 10.it owns special color of the result.
*/

/* Large layout location */
html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

/* Define my own font-family */
@font-face {
	font-family: '../font-family/calculate_style';
	src:url("1.ttf");
}

#calculator {
	position: absolute;
	top:100px;
	left:140px;
	width: 350px;
	height: 417px;
}

#calculator_container {
	position: relative;
	background: url("../image/background.jpg") no-repeat 50% 50%;
	background-size: 120%;
	border:1px solid black;
	width:1000px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

#result {
	width: 300px;
	height: 48px;
	margin-left: 30px;
	margin-top: 8px;
	margin-bottom: 12px;
	text-align: center;
	box-shadow: -2px 3px #FFF, -4px 3px #AAA, -6px 6px #666, -8px 9px #000;
	/* using my own font-family */
}

#result, #record {
	background-color: #1D1D1D;
	border: 3px solid gray;
	color: #80CAAC;
	font-size: 30px;
	font-family: calculate_style;
}

#record {
	position: absolute;
	top:100px;
	left: 560px;
	width:300px;
	height: 500px;
	box-shadow: 2px 3px #FFF, 4px 3px #AAA, 6px 6px #666, 8px 9px #000;
	overflow: hidden;
}

#clean {
	position: absolute;
	border: 3px solid red;
	width: 50px;
	height: 20px;
	border-radius: 20%;
	top: 730px;
	left: 800px;
	text-align: center;
	font-weight: bold;
	color: white;
	background-color: red;
	box-shadow: 2px 3px #FFF, 4px 3px #AAA, 6px 6px #666, 8px 9px #000;
	opacity: 0.6;
}

#clean:hover {
	opacity: 1;
}

.button {
	width: 70px;
	height: 70px;
	font-size: 20px;
	color: white;
	margin-left:10px;
	margin-top: 15px;
	border-radius: 35%;
	background-color: #1F1F1F;
	/* make the protrusion of botton  */
	box-shadow: -2px 3px #FFF, -4px 3px #AAA, -6px 6px #666, -8px 9px #000;
	opacity: 0.8;
}

.button:hover {
	opacity: 1;
}

#first_row,#second_row,#third_row,#fourth_row,#fifth_row {
	margin-left: 12px;
}

#equal {
	background-color:rgb(104,1,2);
}

#delete_all,#delete_one {
	background-color:rgb(104,1,2);
}

#plus,#subtract,#multiply,#divide {
	background-color: rgb(43,62,92);
}